import React,{Fragment} from 'react'
import {getgoodlist} from '../api/index'
import '../style/shangpinxq.css'
class Goods extends React.Component{
    constructor(){
        super()
        this.state={
            goodslists:[
                {
                    name:'',
                    foods:[
                    ]
                }
            ],
            tabname:'热销榜',
            locallists:[],
            peisongfei:5,
            currentshopname:'',
            isshow:false
        }
    }
    componentDidMount(){
    //  let id=this.props.location.state.id ? this.props.location.state.id:'3307';
    let id=this.props.shopinfo.id
        getgoodlist(id).then(res=>{
            this.setState({
                goodslists:res.data
            })
        })
        this.setState({
            locallists:JSON.parse(localStorage.getItem('goodscart')),
            currentshopname:this.props.shopinfo.name
        })
        let currentshoplist=localStorage.getItem('goodscart')?JSON.parse(localStorage.getItem('goodscart')).filter(item=>item.shopname==this.props.shopinfo.name):[];
       this.props.setcurrentshoplist(currentshoplist)
    }
   
    tabclick(tabname,anchorName){
        this.setState({
            tabname:tabname
        })
        if (anchorName) {
            // 找到锚点
            let anchorElement = document.getElementById(anchorName);
            // 如果对应id的锚点存在，就跳转到锚点
            if(anchorElement) { anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'}); }
        }
    }
    addnum(it){
        let localitems=localStorage.getItem('goodscart')?JSON.parse(localStorage.getItem('goodscart')):[];
        let isflag=localitems.find(good=>good.id==it._id);
        if(isflag){
            isflag.num++
        }else{
            let shopname=this.props.shopinfo.name
            let item={
                id:it._id,
                name:it.name,
                price:it.specfoods[0].price,
                num:1,
                shopname
            }
            localitems.push(item)
        }
        localStorage.setItem('goodscart',JSON.stringify(localitems))
        this.setState({
            locallists:localitems
        })
        let currentshoplist=localitems.filter(item=>item.shopname==this.props.shopinfo.name)
        this.props.setcurrentshoplist(currentshoplist)
    }
    addnum2(it){
        let localitems=localStorage.getItem('goodscart')?JSON.parse(localStorage.getItem('goodscart')):[];
        let isflag=localitems.find(good=>good.id==it.id);
        if(isflag){
            isflag.num++
        }else{
            let shopname=this.props.shopinfo.name
            let item={
                id:it.id,
                name:it.name,
                price:it.price,
                num:1,
                shopname
            }
            localitems.push(item)
        }
        localStorage.setItem('goodscart',JSON.stringify(localitems))
        this.setState({
            locallists:localitems
        })
        let currentshoplist=localitems.filter(item=>item.shopname==this.props.shopinfo.name)
        this.props.setcurrentshoplist(currentshoplist)
    }
    delnum(it){
        let localitems=JSON.parse(localStorage.getItem('goodscart'));
        let isflag=localitems.find(good=>good.id==it._id||good.id==it.id);
        if(isflag.num>1){
            isflag.num--
            localStorage.setItem('goodscart',JSON.stringify(localitems))
            let currentshoplist=localitems.filter(item=>item.shopname==this.props.shopinfo.name)
            this.props.setcurrentshoplist(currentshoplist)
            this.setState({
                locallists:localitems
            })
        }else{
         let newarr=localitems.filter(item=>item.id!=it._id);
         localStorage.setItem('goodscart',JSON.stringify(newarr))
         let currentshoplist=newarr.filter(item=>item.shopname==this.props.shopinfo.name)
         this.props.setcurrentshoplist(currentshoplist)
         this.setState({
            locallists:newarr
        })
        }
        
    }
    delnum2(it){
        let localitems=JSON.parse(localStorage.getItem('goodscart'));
        let isflag=localitems.find(good=>good.id==it.id);
        if(isflag.num>1){
            isflag.num--
            localStorage.setItem('goodscart',JSON.stringify(localitems))
            let currentshoplist=localitems.filter(item=>item.shopname==this.props.shopinfo.name)
            this.props.setcurrentshoplist(currentshoplist)
            this.setState({
                locallists:localitems
            })
        }else{
         let newarr=localitems.filter(item=>item.id!=it.id);
         localStorage.setItem('goodscart',JSON.stringify(newarr))
         let currentshoplist=newarr.filter(item=>item.shopname==this.props.shopinfo.name)
         this.props.setcurrentshoplist(currentshoplist)
         this.setState({
            locallists:newarr
        })
        }
        
    }
    delall(){
      let localitems= JSON.parse(localStorage.getItem('goodscart')).filter(item=>item.shopname!=this.props.shopinfo.name);
      localStorage.setItem('goodscart',JSON.stringify(localitems))
      this.props.setcurrentshoplist([])
    }
    showcar(){
        this.setState({
            isshow:!this.state.isshow
        })
    }
    topay(){
        this.props.history.push('/topay')
    }
    render(){  
        return (
            <div>
                <div className='goodlist-container'>
                <div className='goodlist-left'>
                    <ul>
                      {this.state.goodslists.map((item,index)=>{
                          return (
                              <li className={['goodlist-left-li ',this.state.tabname==item.name?'goodlist-left-li-active':''].join(' ')} key={item.name} onClick={this.tabclick.bind(this,item.name,'tab'+index)} >
                            {item.name=='热销榜'?<img className='goodlist-left-img' src='https://fuss10.elemecdn.com/5/da/3872d782f707b4c82ce4607c73d1ajpeg.jpeg'/>:(item.name=='优惠'? <img className='goodlist-left-img' src='https://fuss10.elemecdn.com/4/73/5c4342691749b8e1a531149a46117jpeg.jpeg'/>:'')}
                             &nbsp; {item.name}</li>
                          )
                      })}
                    </ul>
                </div>
                <div className='goodlist-right'>
                    <ul>
                        {this.state.goodslists.map((item,index)=>{
                            return (
                                <li id={'tab'+index} key={item.name}>
                                    <div style={{height:'50px',lineHeight:'50px',padding:'0 20px',boxSizing:'border-box'}}>
                                    <span style={{color:'#696969',fontSize:'16px',fontWeight:'bold'}}>{item.name}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                    <span style={{color:'#B5B5B5'}}>{item.description}</span>
                                    </div>
                                    <ul>
                                        {item.foods.map(it=>{
                                            return (
                                                <li className='gooditem-show' key={it._id}>
                                                <div>
                                                    <img style={{float:'left',width:'90px',height:'90px',borderRadius:'10px'}} src={'https://elm.cangdu.org/img/'+it.image_path} />
                                                    <div style={{float:'left',padding:'5px',boxSizing:'border-box'}}>
                                                        <div>
                                                            <p style={{color:'#333',fontSize:'16px',fontWeight:'bold',margin:'4px'}}>{it.name}</p>
                                                            <p style={{fontSize:'10px',color:'#999',margin:'4px'}}>{it.description}</p>
                                                            <p style={{fontSize:'10px',color:'#333',margin:'4px'}}>{it.tips}</p>
                                                        </div>
                                                        <div  style={{overflow:'hidden',display:'flex',justifyContent:'space-between',width:'158px'}} >
                                                        <span style={{color:'red'}}>￥<b style={{fontSize:'16px'}}>{it.specfoods[0].price}</b></span>  
                                                        <div>
                                                            {this.props.currentshoplist.find(item=>item.id==it._id)?<Fragment><button onClick={this.delnum.bind(this,it)} style={{background:'#3190E8',borderRadius:'50%',border:'0',height:'20px',width:'20px',color:'#fff',fontSize:'20px',position:'relative',padding:'2px',}}><span style={{position:'absolute',top:0,right:0,left:0,right:0,margin:'auto'}}>-</span></button>&nbsp;&nbsp;<span style={{verticalAlign:'bottom',display:'inline-block',paddingBottom:'2px',width:'30px',textAlign:'center'}}>{this.state.locallists.find(item=>item.id==it._id)?this.state.locallists.find(item=>item.id==it._id).num:1}</span>&nbsp;&nbsp;</Fragment>:''}
                                                        <button onClick={this.addnum.bind(this,it)} style={{background:'#3190E8',borderRadius:'50%',border:'0',height:'20px',width:'20px',color:'#fff',fontSize:'20px',position:'relative',padding:'2px'}}><span style={{position:'absolute',top:0,right:0,left:0,right:0,margin:'auto'}}>+</span></button>
                                                        </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                </li>
                                            )
                                        })}
                                    </ul>
                                </li>
                            )
                        })}
                    </ul>
                </div>
                </div>
                <div className='goodlist-bottom'>
                        <div className={['goods-bottom-1',this.props.currentshoplist.length>0 ? 'goods-bottom-1-2':''].join(' ')} onClick={this.showcar.bind(this)}>
                        <img className='goods-bottom-1-1' src={require('../img/购物车.png')}/>
                       {this.props.currentshoplist.length>0? <span className='goods-bottom-1-3'>{this.props.currentshoplist.reduce((sum,val)=>{return sum+=val.num},0)}</span>:''} 
                        </div>
                        <div className='goods-bottom-2' onClick={this.showcar.bind(this)}>
                            <p style={{color:'#fff',fontSize:'20px',margin:'3px 0'}}>￥{this.props.currentshoptotal}</p>
                            <p style={{color:'#fff',fontSize:'9px'}}>配送费￥{this.state.peisongfei}</p>
                        </div>
                        <div className={['goods-bottom-3',this.props.currentshoptotal>=20 ? 'goods-bottom-3-1':''].join(' ')}>
                        { this.props.currentshoptotal>=20 ? <span onClick={this.topay.bind(this)}>去结算</span>:<span >满20元起送</span>}
                        </div>
                </div>
                {this.state.isshow==true?(<div style={{background:'rgba(0,0,0,0.3)',height:'100%',width:'100%',position:'absolute',top:0}}>
                            <div style={{position:'absolute',bottom:'0',paddingBottom:'48px',width:'100%'}}>
                                <h1 style={{height:'45px',background:'#ECEFF1',lineHeight:'45px',width:'100%',color:'#6E6E6E',display:'flex',justifyContent:'space-between',overflow:'hidden',margin:0,padding:0}}><span style={{fontSize:'18px',marginLeft:'10px'}}>购物车</span> <span onClick={this.delall.bind(this)} style={{fontSize:'14px',display:'flex',width:'70px',justifyContent:'space-around'}}><img style={{width:'17px',height:'17px',marginTop:'13px'}} src={require('../img/垃圾箱.png')}/><span>清空</span></span></h1>
                                <ul style={{background:'#fff',width:'100%',height:'200px',overflowY:'scroll'}}>
                                    {this.props.currentshoplist.map(item=>{
                                        return (
                                            <li key={item.id} style={{height:'62px',padding:'14px 11px',boxSizing:'border-box',overflow:'hidden',background:'#fff',lineHeight:'52px'}}>
                                               {this.props.currentshoplist.find(it=>item.id==it.id)?(<Fragment>
                                               <span style={{float:'left',marginLeft:'10px',color:'#666666',fontWeight:'bold',fontSize:'14px',width:'80px',overflow:'hidden'}}>{item.name}</span> 
                                               <span style={{float:'left',marginLeft:'100px',color:'#FF6600'}}>￥<span style={{fontSize:'14px',fontWeight:'bold'}} >{item.price}</span></span>
                                               <span style={{float:'right',marginRight:'20px'}}>
                                                   <button onClick={this.delnum2.bind(this,item)} style={{background:'#3190E8',borderRadius:'50%',border:'0',height:'20px',width:'20px',color:'#fff',fontSize:'20px',position:'relative',padding:'2px',}}><span style={{position:'absolute',top:0,right:0,left:0,right:0,margin:'auto'}}>-</span></button>
                                                   &nbsp;&nbsp;<span style={{verticalAlign:'bottom',display:'inline-block',paddingBottom:'2px',width:'30px',textAlign:'center'}}>{item.num}</span>&nbsp;&nbsp;
                                                    <button onClick={this.addnum2.bind(this,item)} style={{background:'#3190E8',borderRadius:'50%',border:'0',height:'20px',width:'20px',color:'#fff',fontSize:'20px',position:'relative',padding:'2px'}}><span style={{position:'absolute',top:0,right:0,left:0,right:0,margin:'auto'}}>+</span></button>
                                                    
                                               </span>
                                               </Fragment>):''}
                                            </li>
                                        )
                                    })}
                                </ul>
                            </div>
                </div>):''}
            </div>
            
        )
    }
}
export default Goods